<template>
  <div class="my">
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      @change-area="onSelect"
    />
    <van-checkbox v-model="checked">复选框</van-checkbox>
    <van-checkbox-group v-model="result" @change="check">
      <van-checkbox
        v-for="(item, index) in list"
        :key="index"
        :name="item.check"
      >
        复选框 {{ item.val }}
      </van-checkbox>
    </van-checkbox-group>
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressEdit, Area, Checkbox, CheckboxGroup } from 'vant'
import areaList from '../../../mock/address'
Vue.use(AddressEdit).use(Area).use(Checkbox).use(CheckboxGroup)
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      values: '',
      list: [
        {check: 1, val: 'a'},
        {check: 2, val: 'b'},
        {check: 3, val: 'c'}
      ],
      result: [],
      checked: false
    }
  },

  methods: {
    check() {
      // console.log(this.result)
    },
    onSave() {
      // Toast('save')
    },
    onDelete() {
      // Toast('delete')
    },
    onSelect(vl) {
      // console.log(vl)
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [{
          name: '黄龙万科中心',
          address: '杭州市西湖区'
        }]
      } else {
        this.searchResult = []
      }
    }
  }
}
</script>

<style>

</style>
